{% extends "base_manager.html" %}
{% block content %}

    <div class="page-header">
        <h1><i class="fa fa-search page-header-icon"></i>&nbsp;&nbsp;账户管理</h1>
    </div> <!-- / .page-header -->


    <!-- Tabs -->
    <div class="search-tabs">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#search-tabs-all" data-toggle="tab">教师账号 <span
                        class="label label-primary">{{ tch.count }}</span></a>
            </li>
            <li>
                <a href="#search-tabs-users" data-toggle="tab">学生账号 <span
                        class="label label-success">{{ stu.count }}</span></a>
            </li>
            <li>
                <a href="#search-tabs-messages" data-toggle="tab">管理员账号 <span
                        class="label label-danger">{{ admin.count }}</span></a>
            </li>
        </ul> <!-- / .nav -->
    </div>
    <!-- / Tabs -->

    <!-- Panel -->
    <div class="panel search-panel">
        <div class="panel-body tab-content">
            <!-- Classic search -->
            <div class="search-classic tab-pane fade in active" id="search-tabs-all">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th class="text-center">#</th>
                        <th>Username</th>
                        <th>account</th>
                        <th>password</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for person in tch %}
                        <tr>
                            <td class="text-center">{{ forloop.counter }}</td>
                            <td>
                                <img src="/static/picture/1.jpg" alt="" class="avatar" style="height: 30px;width: 30px">&nbsp;&nbsp;
                                <a href="#">{{ person.Name }}</a>
                            </td>
                            <td>{{ person.Account }}</td>
                            <td>***</td>
                            <td>
                                {#									<a href="#" title="Edit" class="btn btn-xs btn-outline btn-success add-tooltip"><i class="fa fa-pencil"></i></a>#}
                                <a href="#" title="Delete" class="btn btn-xs btn-outline btn-danger add-tooltip"
                                   onclick="acc_del('{{ person.Account }}','{{ person.Name }}','teacher')"><i
                                        class="fa fa-times"></i></a>
                                {#									<a href="#" title="Ban user" class="btn btn-xs btn-outline btn-info add-tooltip"><i class="fa fa-lock"></i></a>#}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- / Classic search -->

            <!-- Users search -->
            <div class="search-users tab-pane fade" id="search-tabs-users">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th class="text-center">#</th>
                        <th>Username</th>
                        <th>account</th>
                        <th>password</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for person in stu %}
                        <tr>
                            <td class="text-center">{{ forloop.counter }}</td>
                            <td>
                                <img src="static/picture/1.jpg" alt="" class="avatar">&nbsp;&nbsp;
                                <a href="#">{{ person.Name }}</a>
                            </td>
                            <td>{{ person.Account }}</td>
                            <td>***</td>
                            <td>
                                {#									<a href="#" title="Edit" class="btn btn-xs btn-outline btn-success add-tooltip"><i class="fa fa-pencil"></i></a>#}
                                <a href="#" title="Delete" class="btn btn-xs btn-outline btn-danger add-tooltip"
                                   onclick="acc_del('{{ person.Account }}','{{ person.Name }}','student')">
                                    <i class="fa fa-times"></i>
                                </a>
                                {#									<a href="#" title="Ban user" class="btn btn-xs btn-outline btn-info add-tooltip"><i class="fa fa-lock"></i></a>#}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- / Users search -->

            <!-- Messages search -->
            <div class="search-messages tab-pane fade widget-messages" id="search-tabs-messages">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th class="text-center">#</th>
                        <th>Username</th>
                        <th>account</th>
                        <th>password</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for person in admin %}
                        <tr>
                            <td class="text-center">{{ forloop.counter }}</td>
                            <td>
                                <img src="static/picture/1.jpg" alt="" class="avatar">&nbsp;&nbsp;
                                <a href="#">{{ person.Name }}</a>
                            </td>
                            <td>{{ person.Account }}</td>
                            <td>***</td>
                            <td>
                                {#									<a href="#" title="Edit" class="btn btn-xs btn-outline btn-success add-tooltip"><i class="fa fa-pencil"></i></a>#}
                                <a href="javascript:void(0);" title="Delete"
                                   class="btn btn-xs btn-outline btn-danger add-tooltip"
                                   onclick="acc_del('{{ person.Account }}','{{ person.Name }}','manager')"><i
                                        class="fa fa-times"></i></a>
                                {#									<a href="#" title="Ban user" class="btn btn-xs btn-outline btn-info add-tooltip"><i class="fa fa-lock"></i></a>#}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- / Messages search -->
        </div>
        <!-- / Search results -->

        <!-- Panel Footer -->
        <div class="panel-footer">
            <ul class="pagination">
                <li class="disabled"><a href="#">«</a></li>
                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
            </ul>
            <button data-target="#myModal1" data-toggle="modal" class="btn btn-facebook btn-rounded"
                    style="float:right; margin-right:30px; ">新增用户
            </button>
            <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                加入班级
                            </h4>
                        </div>
                        <form id="info" enctype="multipart/form-data" onsubmit="return false">
                            {% csrf_token %}
                            <div class="panel-body">
                                <div class="row form-group">
                                    <label class="col-sm-3 control-label"
                                           style="font-size:19px;font-weight:normal;padding-left: 50px;padding-top: 8px;">用户名:</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="username" id="username" class="form-control input-lg"
                                               placeholder="用户名" value="">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <label class="col-sm-3 control-label"
                                           style="font-size:19px;font-weight:normal;padding-left: 50px;padding-top: 8px;">账户:</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="userid" id="userid" class="form-control input-lg"
                                               placeholder="输入账户" value="">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <label class="col-sm-3 control-label" style="font-size:19px;font-weight:normal;padding-left: 50px;padding-top: 8px;">密码:</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="password1" id="name" class="form-control input-lg"
                                               placeholder="输入密码" value="">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <label class="col-sm-3 control-label"
                                           style="font-size:19px;font-weight:normal;padding-left: 50px;padding-top: 8px;">身份:</label>
                                    <div class="col-sm-8">
                                        <div style="margin-top: 8px;">
                                            <label class="px-single"><input type="radio" name="person" value="teacher"
                                                                            class="px"><span class="lbl"></span></label>
                                            &nbsp;&nbsp;<span class="lbl">教师</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <label class="px-single"><input type="radio" name="person" value="manager"
                                                                            class="px"><span class="lbl"></span></label>
                                            &nbsp;&nbsp;<span class="lbl">管理员</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary" id="AddAccount" onclick="acc_add()">新增用户</button>
                            </div>
                        </form>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

        </div> <!-- / .panel-footer -->

    </div>
    <!-- / Panel -->
    <script>
        function acc_del(account, name, iden) {
            var k = confirm("确认删除?");
            if (k) {
                var post_data = {'account': account, "name": name, "iden": iden};
                $.ajax({
                    url: '/service/account_del/',
                    type: 'POST',
                    data: post_data,
                    success: function (response) {
                        if (response['status'] == 200) {
                            alert("删除成功");
                            window.location = '/service/account_show/'
                        } else if (response['status'] == 500) {
                            alert("您不能删除您自己");
                        } else {
                            alert("删除失败");
                        }
                    }
                })
            }
        }

        function acc_add() {
            let Data = $('#info').serialize();
            $.ajax({
                type: 'POST',
                url: '/service/operate_register/',
                dataType: 'json',
                data: Data,
                success: function (response) {
                    if (response['status']==200){
                        alert("添加成功！");
                        window.location.href='/service/account_show/';
                    }
                    else if(response['status']==203){
                        alert("已有此账号！");
                        window.location.href='/service/account_show/';
                    }
                    else {
                        alert("异常！");
                        window.location.href='/service/account_show/';
                    }
                }
            })

        }
    </script>



{% endblock %}